<template>
  <div>
    <div class="head">
			<AppHeader style="z-index:10"></AppHeader>
        <van-image
          :src="require('@/assets/img/explore-1.jpeg')"
					height="300px"/>  	
      <h1>计划您的旅程</h1>
		</div>

    <div class="exploreGuide">
      <h1>探索我们的旅行计划</h1>
      <van-grid>       
          <van-image :src="require('@/assets/img/explore-2.webp')" style="width:100%" />    
          <div class="travelPlan">
            <h2>打造您独一无二的行程</h2>
            <p>创建一个完全定制的每日行程，发现可可西里的隐秘风光。</p>
            <van-button round style="width:120px;margin-top: 10px;" @click="$router.push('/route')">了解详情</van-button>
          </div> 
      </van-grid>
    </div>
    <!-- 跳转旅行计划和分享页面 -->
    <div class="guideInfo">
      <h2>有用的信息</h2>
      <van-grid>       
          <van-image :src="require('@/assets/img/explore-3.jpg')" style="width:100%" />    
          <div class="guideInfo_trip">
            <h4>安全须知</h4>
            <h3>事前准备</h3>
            <p>请参考前往可可西里前的旅行条例！</p>
            <van-button round style="width:120px;margin-top: 10px;background-color: brown;color: white;" @click="$router.push('/travel')">了解详情</van-button>
          </div> 
      </van-grid>
      <van-grid>       
          <van-image :src="require('@/assets/img/explore-4.jpg')" style="width:100%" />    
          <div class="guideInfo_safe">
            <h4>旅游攻略</h4>
            <h3>他人分享</h3>
            <p>看看他人的旅途分享</p>
            <van-button round style="width:120px;margin-top: 10px;background-color: brown;color: white;" @click="$router.push('/share')">了解详情</van-button>
          </div> 
      </van-grid>
    </div>

    <div class="exploreCards">
			<h1>获得打造旅行计划的灵感</h1>
			<!-- 探索卡片 -->
			<van-swipe :loop="false" :width="380">
				<van-swipe-item>
					<van-grid style="border:1px solid transparent;border-radius:10px;overflow: hidden; margin:0px 20px;">
						<van-image :src="require('@/assets/img/explore-5.1.webp')" height="250" fit="cover" />
						<a href="">
							<div style="width:300px;padding-left:20px;">
								<h3 style="margin-top:30px;color:black;">活动&景点</h3>
								<van-divider />
								<van-cell title="了解详情" title-style="color:brown;" is-link />
							</div>
						</a>
			</van-grid>
				</van-swipe-item>
				<van-swipe-item>
					<van-grid style="border:1px solid transparent;border-radius:10px;overflow: hidden; margin:0px 10px;">
						<van-image :src="require('@/assets/img/explore-5.2.webp')" height="250" fit="cover" />
						<a href="">
							<div style="width:300px;padding-left:20px;">
								<h3 style="margin-top:30px;color:black;">目的地</h3>
								<van-divider />
								<van-cell title="了解详情" title-style="color:brown;" is-link />
							</div>
						</a>
			</van-grid>
				</van-swipe-item>
				<van-swipe-item>
					<van-grid style="border:1px solid transparent;border-radius:10px;overflow: hidden; margin:0px 10px;">
						<van-image :src="require('@/assets/img/explore-5.3.jpg')" height="250" fit="cover" />
						<a href="">
							<div style="width:300px;padding-left:20px;">
								<h3 style="margin-top:30px;color:black;">旅游&体验</h3>
								<van-divider />
								<van-cell title="了解详情" title-style="color:brown;" is-link />
							</div>
						</a>
			</van-grid>
				</van-swipe-item>
				<van-swipe-item>
					<van-grid style="border:1px solid transparent;border-radius:10px;overflow: hidden; margin:0px 10px;">
						<van-image :src="require('@/assets/img/explore-5.4.jpg')" height="250" fit="cover" />
						<a href="">
							<div style="width:300px;padding-left:20px;">
								<h3 style="margin-top:30px;color:black;">行程</h3>
								<van-divider />
								<van-cell title="了解详情" title-style="color:brown;" is-link />
							</div>
						</a>
			</van-grid>
				</van-swipe-item>
			</van-swipe>
		</div>
    <!-- 底部栏 -->
    <AppFooter></AppFooter>
  </div>
</template>

<script>
import AppHeader from '@/components/AppHeader.vue';
import AppFooter from '@/components/AppFooter.vue';
	export default {
		components: { AppHeader,AppFooter },
		data() {
    		return {
      			currentPage: 1,
				activeNames: ['1'],
				show: false,
    		};
  		},
		  methods: {
    			showPopup() {
      			this.show = true;
    			},
  		},
	}
</script>

<style lang="scss" scoped>  
.head{
	position: relative;
	h1{
		position: absolute;
		top: 200px; 
    left: 20px;
    color: white;
	}
}
  
.exploreGuide{
  margin-bottom:20px;
	h1{
  font-size:28px;
  padding: 20px;
  padding-bottom: 10px;
	}
	.travelPlan{
  width:100%;
  line-height:30px;
   padding:30px;
   background-color: brown;
   color: white;
	}
}
 

.guideInfo{
  margin-top:40px;
	h2{
  padding:40px 20px;
  font-size:32px
	}
	.guideInfo_trip{
  width:400px;
  line-height:30px;
  padding:40px;
	}
	.guideInfo_safe{
	width:400px;
	line-height:30px;
	 padding:40px;
	}
}


.exploreCards{
	h1{
		padding:20px;
		font-size:32px
	}
}

</style>